<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tools</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2681745_k0zz6odeb4n.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        a {
            text-decoration: none
        }
        
        body {
            font-family: 'Lato', sans-serif;
            background-color: #ddd;
            color: #21bbfe;
            overflow-x: hidden;
            position: relative;
        }
        
        .container {
            background-color: #fff;
            position: relative;
            width: 100vw;
            height: 100vh;
            transform-origin: left top;
            transition: all 0.3s linear;
        }
        /* 旋转动作 */
        
        .container.show-nav {
            transform: rotate(-20deg);
        }
        
        .container.show-nav .circle {
            transition: all 0.2s ease-in;
            transform: rotate(-75deg);
        }
        
        .container.show-nav+nav li {
            transform: translate(0);
            transition: all 0.2s ease-in 0.1s;
        }
        
        img {
            width: 800px;
            height: 600px;
        }
        
        .circle-container {
            width: 100px;
            height: 100px;
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            z-index: 999;
        }
        
        .circle {
            position: realtive;
            width: 100%;
            height: 100%;
            background-color: skyblue;
            border-radius: 50%;
        }
        
        .circle button {
            outline: none;
            border: none;
            width: 35px;
            height: 35px;
            font-size: 35px;
            color: #fff;
            cursor: pointer;
            background-color: transparent;
            position: absolute;
            left: 50%;
            top: 50%;
        }
        
        button.close {
            transform-origin: top left;
            transform: rotate(90deg);
            transition: transform 0.3s linear 0.1s;
        }
        
        ul {
            list-style: none;
            position: fixed;
            top: 45%;
            left: 1%;
            color: #fff;
            z-index: 999;
        }
        
        ul>li {
            margin-top: 30px 0;
            font-size: 20px;
            transform: translate(-120%);
        }
        
        ul>li:nth-child(2) {
            margin: 30px 0 0 10px;
            transform: translate(-150%);
        }
        
        ul>li:nth-child(3) {
            margin: 30px 0 0 20px;
            transform: translate(-200%);
        }
        /* 卡片代码区 */
        
        .levels {
            /* position: absolute;
            top: 50%; */
            /*   left: 50%;*/
            margin-left: 180px;
            margin-top: 200px;
            transform-style: preserve-3d;
            user-select: none;
        }
        
        .levels .level {
            position: relative;
            width: 280px;
            height: 140px;
            border-radius: 12px;
            color: #ffc0cb;
            cursor: pointer;
            transition: all 0.4s ease;
            transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
        }
        
        .levels .level.one {
            margin-top: -70px;
            background-color: #8063e1;
            background-image: linear-gradient(135deg, #bd7be8, #8063e1);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #8063e1;
            z-index: 4;
            opacity: 0.9;
        }
        
        .levels .level.two {
            margin-top: -70px;
            background-color: #3f58e3;
            background-image: linear-gradient(135deg, #7f94fc, #3f58e3);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #3f58e3;
            z-index: 3;
            opacity: 0.9;
        }
        
        .levels .level.three {
            margin-top: -70px;
            background-color: #2c6fd1;
            background-image: linear-gradient(135deg, #21bbfe, #2c6fd1);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #2c6fd1;
            z-index: 2;
            opacity: 0.9;
        }
        
        .levels .level.four {
            margin-top: -70px;
            background-color: #352f64;
            background-image: linear-gradient(135deg, #415197, #352f64);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #352f64;
            z-index: 1;
            opacity: 0.9;
        }
        
        .levels .level .title {
            position: absolute;
            top: 28px;
            left: 15px;
            font-size: 26px;
            font-weight: bold;
        }
        
        .levels .level .content {
            position: absolute;
            font-weight: 700;
            bottom: 15px;
            left: 15px;
            font-size: 16px;
        }
        
        .levels .level:hover {
            transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
            opacity: 0.6;
        }
        
        .levels .level:hover:after {
            transform: translateX(100%);
            transition: all 1.2s ease-in-out;
        }
        
        .levels .level::after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateX(-100%);
            background-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 80%);
        }
        
        .levels1 {
            margin-left: 150px;
            margin-top: 200px;
            transform-style: preserve-3d;
            user-select: none;
        }
        
        .levels1 .level {
            position: relative;
            width: 280px;
            height: 140px;
            border-radius: 12px;
            color: #cd7dec;
            cursor: pointer;
            transition: all 0.4s ease;
            transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
        }
        
        .levels1 .level.one {
            margin-top: -70px;
            background-color: #CCFFFF;
            background-image: linear-gradient(135deg, #99CCFF, #5ba8c7);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #71abc2;
            z-index: 4;
            opacity: 0.9;
        }
        
        .levels1 .level.two {
            margin-top: -70px;
            background-color: #5e74b1;
            background-image: linear-gradient(135deg, #6a89cc, #4a69bd);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #4a69bd;
            z-index: 3;
            opacity: 0.9;
        }
        
        .levels1 .level.three {
            margin-top: -70px;
            background-color: #cebc6f;
            background-image: linear-gradient(135deg, #cebe76, #d2da6b);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #cebf7c;
            z-index: 2;
            opacity: 0.9;
        }
        
        .levels1 .level.four {
            margin-top: -70px;
            background-color: #70c4af;
            background-image: linear-gradient(135deg, #81ccb3, #58d1b3);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px#79e0b5;
            z-index: 1;
            opacity: 0.9;
        }
        
        .levels1 .level .title {
            position: absolute;
            top: 28px;
            left: 15px;
            font-size: 26px;
            font-weight: bold;
        }
        
        .levels1 .level .content {
            position: absolute;
            font-weight: 700;
            bottom: 15px;
            left: 15px;
            font-size: 16px;
        }
        
        .levels1 .level:hover {
            transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
            opacity: 0.6;
        }
        
        .levels1 .level:hover:after {
            transform: translateX(100%);
            transition: all 1.2s ease-in-out;
        }
        
        .levels1 .level::after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateX(-100%);
            background-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 80%);
        }
        /*  */
        
        .levels2 {
            margin-left: 150px;
            margin-top: 200px;
            transform-style: preserve-3d;
            user-select: none;
        }
        
        .levels2 .level {
            position: relative;
            width: 280px;
            height: 140px;
            border-radius: 12px;
            color: #f0df4c;
            cursor: pointer;
            transition: all 0.4s ease;
            transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
        }
        
        .levels2 .level.one {
            margin-top: -70px;
            background-color: #ccae7a;
            background-image: linear-gradient(135deg, #dfb286, #dbac4e);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #ebb750;
            z-index: 4;
            opacity: 0.9;
        }
        
        .levels2 .level.two {
            margin-top: -70px;
            background-color: #63fafa;
            background-image: linear-gradient(135deg, #7bc3f3, #76c4c0);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #47ced3;
            z-index: 3;
            opacity: 0.9;
        }
        
        .levels2 .level.three {
            margin-top: -70px;
            background-color: #dd88e0;
            background-image: linear-gradient(135deg, #c98ddb, #e089e0);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #d6a6c4;
            z-index: 2;
            opacity: 0.9;
        }
        
        .levels2 .level.four {
            margin-top: -70px;
            background-color: #63d2e1;
            background-image: linear-gradient(135deg, #667ecc, #354280);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #354280;
            z-index: 1;
            opacity: 0.9;
        }
        
        .levels2 .level .title {
            position: absolute;
            top: 28px;
            left: 15px;
            font-size: 26px;
            font-weight: bold;
        }
        
        .levels2 .level .content {
            position: absolute;
            font-weight: 700;
            bottom: 15px;
            left: 15px;
            font-size: 16px;
        }
        
        .levels2 .level:hover {
            transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
            opacity: 0.6;
        }
        
        .levels2 .level:hover:after {
            transform: translateX(100%);
            transition: all 1.2s ease-in-out;
        }
        
        .levels2 .level::after {
            content: '';
            position: absolute;
            top: 0px;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateX(-100%);
            background-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 80%);
        }
        
        .content1 {
            display: flex;
        }
        
        @media screen and (max-width:600px) {
            body {
                height: 250vh;
            }
            .content1 {
                width: 100vw;
                height: 250vh;
                display: flex;
                align-items: center;
                flex-direction: column;
                background-color: #fff;
            }
            .levels {
                margin-top: 250px;
                margin-left: 0;
            }
            .levels1,
            .levels2 {
                margin-top: 200px;
                margin-left: 0;
            }
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="circle-container">
            <div class="circle">
                <button class="iconfont icon-quxiao close"></button>
                <button class="iconfont icon-caidan open"></button>
            </div>
        </div>

        <div class="content1">
            <div class="levels">
                <a href="http://hemin.cn/jq/cheatsheet.html">
                    <div class="level one">
                        <div class="title">jQuery速查表</div>
                        <div class="content">jQuery中文手册</div>
                    </div>
                </a>
                <a href="http://css.doyoe.com/">
                    <div class="level two">
                        <div class="title">CSS参考手册</div>
                        <div class="content"> web前端开发参考手册系列</div>
                    </div>
                </a>
                <a href="https://muyiy.cn/">
                    <div class="level three">
                        <div class="title">木易杨前端进阶</div>
                        <div class="content">高级前端进阶之路 →</div>
                    </div>
                </a>
                <a href="https://doc.houdunren.com/">
                    <div class="level four">
                        <div class="title">后盾人</div>
                        <div class="content"> 系统学习在线文档</div>
                    </div>
                </a>
            </div>
            <div class="levels1">
                <a href=" http://interview.poetries.top/">
                    <div class="level one">
                        <div class="title">面试指南</div>
                        <div class="content">梳理常见的前端基础知识</div>
                    </div>
                </a>
                <a href="https://www.luogu.com.cn/">
                    <div class="level two">
                        <div class="title">洛谷</div>
                        <div class="content">在线算法题库</div>
                    </div>
                </a>
                <a href="https://visualgo.net/zh">
                    <div class="level three">
                        <div class="title">VisuAlgo</div>
                        <div class="content">数据结构和算法动态可视化</div>
                    </div>
                </a>

                <a href="https://algorithm-visualizer.org/">
                    <div class="level four">
                        <div class="title">Visualizer</div>
                        <div class="content">算法可视化工具</div>

                    </div>
                </a>
            </div>
            <div class="levels2">
                <a href="https://flatuicolors.com/">
                    <div class="level one">
                        <div class="title">FlatuiColors</div>
                        <div class="content"> 最受欢迎的配色网站</div>
                    </div>
                </a>
                <a href="https://www.processon.com/">
                    <div class="level two">
                        <div class="title">Processon</div>
                        <div class="content">免费在线作图工具 </div>
                    </div>
                </a>
                <a href="https://docsmall.com/">
                    <div class="level three">
                        <div class="title">DocSmall</div>
                        <div class="content">超强图片压缩网站</div>
                    </div>
                </a>
                <a href="https://www.bnocode.com/">
                    <div class="level four">
                        <div class="title">白码</div>
                        <div class="content">低代码快速开发平台</div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <nav>
        <ul>
            <li> <a href="javascript:void(0)" onclick="goTo('index.html')"><i class="iconfont icon-HOMEMESSAGE"></i> HOME</a></li>
            <li><a href="javascript:void(0)" onclick="goTo('tools.html')"><i class="iconfont icon-Tools"></i> TOOL</a></li>
            <li><a href="javascript:;"><i class="iconfont icon-more"></i> MORE</a></li>
        </ul>
    </nav>

    <script>
        let closebtn = document.querySelector('.close');
        let openbtn = document.querySelector('.open');
        let container = document.querySelector('.container')
        openbtn.addEventListener('click', function() {
            container.classList.add('show-nav')
        })
        closebtn.addEventListener('click', function() {
            container.classList.remove('show-nav')
        })

        function goTo(url) {
            window.location.href = url;
        }
    </script>
</body>

</html>